typescript 学习

1.安装及使用

1.安装

yarn global add typescript

查询版本号 tsc -v

2. 生成配置文件（自动将ts编译为js）

命令行中输入tsc --init    生成的tsconfig.json 文件中配置 “outDir”:"生成的js文件名（./js）"

2.基础类型

布尔boolean   （true/false）

let cat:boolean = true 

数字number （支持二进制、八进制、十进制和十六进制）

前缀为 0b 表示二进制、0o 表示八进制、0x 表示十六进制，默认为十进制

let num:number = 123

 字符串string（可以使用双引号或单引号表示字符串，还可以使用模版字符串）

let str:string = "你好呀"
let str:string = '你好呀'
let str: string = `Hello, my name is ${ name } 适用于动态渲染，等同与
let str: string = "Hello, my name is " + name

数组(只能定义一种类型的数组)

在元素类型后加上 [ ] 或使用数组泛型 Array<元素类型> 来声明数组

let arr: string[] = ["a","b","c"]   或
let arr:Array<number> = [1.2,3]

 元组 （可以定义多个类型的数组，如可以定义数组中值分别为 string和number类型）

let arr:[string,number] = ["嗯呢"，12]

枚举enum（默认情况下，从0开始为元素编号，也可以手动的指定成员的数值）

// 声明枚举变量 color，red 对应值为 0，yellow 为 1，blue 为 2

enum color {red, yellow, blue};
let c: color = color.blue;
console.log(c);    // 控制台输出对应值，这里为 2

// 可采用手动赋值方法
enum color {red = 1, yellow = 3, blue = 6};
console.log(color.yellow);    // 输出 3
console.log(color[3]);　　// 输出 yellow

Any (为在编译阶段还不清楚类型的变量指定一个类型)

let notSure: any = 4
console.log(notSure)    // 输出 4

notSure = "maybe a string instead."
console.log(notSure);    // 输出 maybe a string instead

 Void(表示没有任何类型)

function warnUser(): void {
    console.log("This is my warning message");
}

null 和 undefined

let u: undefined = undefined;
let n: null = null;

3. defineComponent（给予了组件 正确的参数类型推断）

import { defineComponent } from 'vue';

export default defineComponent({
});

4.interface （检查变量类型，判断一个类型的一个关键方法就是interface，只是用在TypeScript编译的时候，编译完成后就会删除。不会在编译完成后的JavaScript文件中存在。）