Typescript1-基本语法

TypeScript 的介绍

1. TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码
2. TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中
3. TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript
4. TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持

TypeScript 的特点

始于JavaScript，归于JavaScript

TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中

强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构

先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件

安装

1. Node.js环境下npm install -g typescript
2. 检查tsc -V 出现版本号安装成功

使用

1. 文件名以.ts结尾
2. 第一个ts代码

(()=>{
    
    
    function greeter (msg:string) {
    
    
        return 'hello' + msg
    }
    let msg='world'
    console.log(greeter(msg))
})()

3. 对ts文件进行编译tsc 文件名.ts
4. 执行 node 文件名.js控制台输出hello world

功能

类型注解

(()=>{
    
    
    function greeter (msg:string) {
    
    
        return 'hello' + msg
    }
    let msg='typescript'
    console.log(greeter(msg))
})()

1. 输出为hello typescript
2. TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式
3. 在这个例子里，我们希望 greeter 函数接收一个字符串参数,如果是其他的会报错error TS2345: Argument of type ‘number[]’ is not assignable to parameter of type ‘string’

接口

1. 接口是对象的状态(属性)和行为(方法)的抽象(描述)
2. 类的接口可理解为类型注解的集合
3. 类的接口可以理解为是一种能力一种约束

/*
*类的接口是一种能力一种约束
*/
( () => {
    
    
    interface IPerson {
    
    
        fistName: String
        lastName: string
    }
    function showName(Person: IPerson){
    
    
        return Person.fistName + "_" + Person.lastName
    }
    const Person = {
    
    
        fistName: "东方",
        lastName: "不败"
    }
    console.log(showName(Person))
})()
//先编译后执行输出东方_不败

4. 接口属性

• 可选属性: ?
• 只读属性: readonly

interface IPerson{
    
    
    readonly id: number
    name: string
    age?: number
}
class Person{
    
    
    constructor(obj) {
    
    
        console.log(obj)
    }
}
const person1: IPerson={
    
    
    id: 1,
    name:"jack",
    age:20
}
const person2: IPerson={
    
    
    id: 1,
    name:"rose"
}
const p1 = new Person(person1)
// console.log(p1.id) 应为是只读所以不能操作
const p2 = new Person(person2)
/*
*  输出
* { id: 1, name: 'jack', age: 20 }
* { id: 1, name: 'rose' }
*/

类

(() => {
    
    
    class User{
    
    
        firstName: string
        lastName: string
        showNmae: string
        constructor(firstName: string,lastName: string) {
    
    
            this.firstName=firstName
            this.lastName=lastName
            this.showNmae=this.firstName + " " + this.lastName
        }
    }
    interface Person{
    
    
        fistName:string
        lastName:string
    }
    function greeter (person: Person) {
    
    
    return 'Hello, ' + person.firstName + ' ' + person.lastName
   }

    let user=new User("西门","吹雪")
    console.log(greeter(user))
    // hello，西门 吹雪
})()

1. 输出为西门-吹雪
2. TypeScript 里的类只是一个语法糖，本质上还是 JavaScript 函数的实现

语法

基本数据类型

1. 语法 let 变量名：数据类型 = 值
2. 布尔值

let isDone: boolean = false;
console.log(isDone = true)
// false

3. 数字JavaScript 一样，TypeScript 里的所有数字都是浮点数

let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
let a4: number = 0xa // 十六进制

4. 字符串我们使用 string 表示文本数据类型。 和 JavaScript 一样，可以使用双引号（"）或单引号（'）表示字符串

let name:string = 'tom'
name = 'jack'
// name = 12 // error
let age:number = 12
const info = `My name is ${
      
      name}, I am ${
      
      age} years old!`
/*My name is jack, I am 12 years old!
*遵顼JS语法，可以和其他类型拼接
*/

5. undefined 和 null
   这两个可以作为其他类型子类型，也就是说可以将他们赋给其他类型

let num: number = 100
num = null
console.log(num)
/*
*输出null
*但注意得关闭严格模式，不然编译会报错 "strict": false
*/

6. 数组

• 在元素类型后面接上[]，表示由此类型元素组成的一个数组

let arr1: number[]=[1,4]

• 使用数组泛型，Array<元素类型>

let arr2: Array<number>=[4,1]

7. 元组 Tuple

• 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
• 在定义数组的时候，类型和数据个数就确定了，注意位置顺序要保持一致

let t1: [string, number]
t1 = ['hello', 10]
console.log(t1[0].substring(0,2))
//he

8. 枚举

• enum 类型是对 JavaScript 标准数据类型的一个补充
• 枚举类型中每一个数据值都可以叫做元素，每个元素都有自己的编号，默认从0开始

enum Color{
    
    
    Red,
    blue,
    pink
}
let mycolor: Color=Color.pink
console.log(mycolor,Color.Red,Color.blue)
//输出2,0,1
console.log(Color[3])
//输出pink

9. any

• 当我们遇到不确定类型时，可以使用any来存储
• 也就是说any可以存储任意类型

const any1: any= 123
any1 = "sting"
console.log(any1)
//输出sting

10. void

• 某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型
• 当一个函数没有返回值时，你通常会见到其返回值类型是 void

function showstr(): void(){
    
    
	console.log("测试信息")
}
showstr()

11. object

• object 表示非原始类型，也就是除 number，string，boolean之外的类型
• 使用 object 类型，就可以更好的表示像 Object.create 这样的 API

function getObj(obj: object): object{
    
    
    console.log(obj)
    return {
    
    
        name:"jack",
        age:20
    }
}

console.log(getObj({
    
    name:'rose',age:20}))
/*
* 输出
*{ name: 'rose', age: 20 }
*{ name: 'jack', age: 20 }
*/
getObj(new String("tom"))
/*
*  输出
* tom表示可以时子类型数据
*/

12. 联合类型
    联合类型（Union Types）表示取值可以为多种类型中的一种

function getStrNum (show: string | number){
    
    
    console.log(show)
}
getStrNum(123)
getStrNum("123")
/*
*  输出
* 123数字类型
* 123字符串类型
*/

13. 类型断言

• 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构
• 他对运行没有影响，只对编译起作用
• 告诉编译器我知道这个语法是这样的，就这么做
• 语法<> || as

function showStr(str: string | number): number{
    
    
    if((<string>str).length){
    
     // 这里不用类型断言会报错
        return (<string>str).length
    }else {
    
    
        return str.toString().length
    }
}

console.log(showStr(12345))
console.log(showStr("123456"))
/*
* 输出
* 5
* 6
*/

14. 类型断言

• 类型推断: TS会在没有明确的指定类型的时候推测出一个类型
• 定义变量时赋值了, 推断为对应的类型
• 定义变量时没有赋值, 推断为any类型

 let str;
str = 123
str = "测试文字"
console.log(str)

let str;

函数类型

接口可以描述函数类型，只需要给接口定义一个调用签名

// 定义一个接口，调用它的函数必须遵守这个规则
interface searchFun {
    
    
    (source: string, subString: string):boolean
}
// mySearch遵循接口定义，判断第二个元素是否在第一个元素里，返回true或false
const mySearch: searchFun=function (source,sub){
    
    
    return source.search(sub) > -1
}
console.log(mySearch("hello typescript","typescript"))
//true