ts

基础类型

布尔值

let visible: boolean = false

数字

let num: number = 3

字符串

let str: string = 'cy is a beautiful girl'

使用模版字符串，可以定义多行文本和内嵌表达式。 被反引号包围（ `），并且以${ expr }这种形式嵌入表达式

let bb = 'cy';
let ccc: string = `${bb} is a beautiful girl`

数组

• 第一种写法

let arr1: Array<string> = ["1"]

• 第二种写法

let arr2: string[] = ['3333']

一些示例

let c: ['1'] = ['1']
let f: any[] = [3]
let g: Array<any> = [3, '222']

元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x: [string, number] = ['cy', 21]

当访问一个越界的元素，会报错

x[3] = 'word' // 不能将类型“"word"”分配给类型“undefined”。

枚举

默认情况下，从0开始为元素编号。

enum Letter {
    A 
    B
    C 
    D,
}
const aa: string = Letter[0] // A
const bb: number = Letter['A'] // 0

你也可以赋值。

enum Letter {
    A = "这是A",
    B = "这是B",
    C = 500,
    D,
}

const aa: string = Letter[501] // D
const bb: string = Letter['A'] // "这是A"

any

let notSure: any = 4;
notSure = 'cy';

void

function warnUser(): void {
    console.log('this is my warnUser');
}
let unusable: void = undefined;
unusable=null; // 不能将类型“null”分配给类型“void”。

null 和 undefined

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

never

never可以赋值给任何类型； 没有类型可以赋值给never类型（除了never本身之外）

// 返回never的函数必须存在无法达到的终点
function aaa(): never {
    while (true) {
    }
}
function aaa2(): never {
    throw new Error('error')
}

object

declare function create(o: object | null): void;
create({ prop: 0 }); // OK 
create(null); // OK 
create(42); // Error 
create("string"); // Error 
create(false); // Error create(undefined); // Error

类型断言

// 类型断言
// 1、<类型>值
// 2、值 as 类型 tsx只能用第二种
const num: string | number = 3;
function cc(c: string | number = 5) {
    if (typeof c == 'string') {
        (<string>c).split('.')
    }
}
cc(num)

接口

ts的核心原则之一是对值所具有的结构进行类型检查。interface为这些类型命名以及为代码定义契约，问号是代表可选。

interface Config {
    color: string,
    width?: number
}

function getConfig(config: Config): void {
    let aaaa = { color: 'red', width: 300 }
    if (config.color) {
        aaaa.color = config.color

    }
    if (config.width) {
        aaaa.width = config.width
    }
}

getConfig({ color: 'blue' })