01-TypeScirpt 基本语法
2020-09-30 本文已影响0人
低头看云
数字 Number
var num: number = 1
console.log('num', num)
// 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
var num1: number = 10 // 10进制
var num2: number = 0x000a // 16进制
var num3: number = 0b1010 // 2进制
var num4: number = 0o0012 // 8进制
console.log(num1, num2, num3, num4) // 10 10 10 10
布尔值 Boolean
var b: boolean = false
console.log('b', b)
字符串 String
var personName: string = 'Cloud'
//使用typescript 点方法时可以给出字符串方法的提示
// toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回
var lowerCaseName: string = personName.toLowerCase()
// 同样在typescript中可以使用模板字符串
// 它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（`），并且以${ expr }这种形式嵌入表达式
var introduce: string = `my name is ${personName}`
console.log('personName', personName, lowerCaseName, introduce) // cloud
数组 Array
- 有两种方式可以定义数组。
- 第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：
var arr: number[] = [1, 3, 5]
- 第二种方式是使用数组泛型，Array<元素类型>：
var arr1: Array<number> = [2, 4, 6]
console.log('arr', arr, arr1)
// 当数组中有字符串和数字时 类似于或的意思
var arr2:(string | number)[] = [1, '2', 3]
- 任意类型数组
let arr4: any[] // 表示定义了一个名称叫做arr4的数组, 这个数组中将来可以存储任意类型的数据
arr4 = [1, 'b', false]
console.log(arr4)
元组 Tuple
- var arr: number[] = [1, 3, 5] 数组中元素类型要都时number类型
- 而元组类型表示一个已经元素数量和类型的数组,各元素的类型可以不同
// 第一个元素是字符串, 第二个是数字类型, 第三个元素必须是布尔类型
let arr5: [string, number, boolean]
arr5 = ['a', 3, true]
// arr5 = ['a', 3, 'false'] // 'string' is not assignable to type 'boolean'.
console.log('arr5', arr5)
var tup: [string, number] = ['cloud', 18]
// tup = [10,"cloud"] // error 报错
const teacherInfo: [string, string, number] = ['Dell', 'male', 18];
枚举 enum
- 枚举类型 取值是固定的
// 定义一个名称叫做gender的枚举类型
// 这个枚举的取值类型是Male 和 Female
enum Gender {
Male,
Female,
}
let val: Gender
val = Gender.Male
// val = 'nan' // 报错
// 注意: ts的枚举底层是实现的本质就是数值类型, 所以赋值一个数值不会报错
val = 123 // 不会报错
console.log(Gender.Male) // 0
console.log(Gender.Female) // 1
// 定义一个ColorType 的枚举
enum ColorType {
Red,
Green = 3,
Blue
}
var c: ColorType = ColorType.Red // 0
// 注意: 如果手动指定了后面的枚举的取值, 那么前面枚举的取值不会受到影响
var c: ColorType = ColorType.Blue // 4
console.log(c)
- 枚举类型提供的一个便利是你可以由枚举的值得到它的名字。
- 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：
enum Color {
Red = 1,
Green,
Blue
}
var colorName: string = Color[2]
console.log(colorName) // 显示'Green'因为上面代码里它的值是2
- 探究底层实现原理
// 探究底层实现原理
var Gender;
(function (Gender) {
// Gender[key] = value;
Gender[Gender["Male"] = 0] = "Male";
Gender[Gender["Femal"] = 1] = "Femal";
})(Gender || (Gender = {}));
let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Femal"] = 1;
Gender[1] = "Femal";
数字枚举
- 数字枚举的取值默认是从0开始递增的
- 数字枚举的取值可以是字面量, 也可以是常量, 还可以是计算结果
const num = 123
function getNum() {
return 23
}
enum Gender1 {
Male,
Female = num,
// Shen, // 如果使用常量给前面的枚举赋值了, 那么后面的枚举值也需要手动赋值
Yao = getNum(),
}
console.log('Gender1', Gender1.Male) // 0
console.log('Gender1', Gender1.Female) // 123
console.log('Gender1', Gender1.Yao) // 23
- 枚举的反向映射
enum Gender2 {
Male,
Female,
}
console.log('Gender2', Gender2.Male) // 0
console.log('Gender2', Gender2[1]) // Female
字符串枚举
enum StringEnum {
Title = '123',
// text , // 如果字符串前面的枚举值赋值了,那么后面的枚举值也必须赋值
Text = 'test',
}
console.log(StringEnum.Title)
- 字符串枚举的注意点
- 和数字枚举不一样,字符串枚举不能使用常量或者计算结果给枚举赋值
- 字符串枚举不能够使用常量或者计算结果给枚举赋值, 但是可以使用它内部的其他枚举值来赋值
let str = 'sssddf'
function getStr(): string {
return 'sdfsd'
}
enum StringEnum1 {
Str = '23',
// title = str,
// text , // 如果字符串前面的枚举值赋值了,那么后面的枚举值也必须赋值
Text = 'test',
Str2 = Str,
// demo = getStr(),
}
console.log('StringEnum1', StringEnum1.Str2) // StringEnum1 23
异构枚举
- 枚举中既包含数字又包含了字符串,称为异构枚举
enum Gender3 {
Male = 3,
Female = 'ss',
}
console.log('Gender3', Gender3.Female)
console.log('Gender3', Gender3[3])
// console.log('Gender3', Gender3['ss'])
// 注意点: 如果是字符串枚举, 那么无法通过原始值获取到枚举值
console.log('Gender3', Gender3) // {3: "Male", Male: 3, Female: "ss"}
联合枚举类型
interface PersonInterface {
gender: Gender
}
class Person implements PersonInterface {
gender: Gender = Gender.Male
}
let p = new Person()
console.log('p.gender', p.gender)
任意值 any
var a: any = 1
a = "cloud"
a = false
-
在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。
-
当你只知道一部分数据的类型时，any类型也是有用的。
-
比如，你有一个数组，它包含了不同的类型的数据：
let list: any[] = [1, false, 'cloud']
console.log(list[1])
空值 void
- 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型.
- 当一个函数没有返回值时，你通常会见到其返回值类型是void：
function func(): void {
console.log('hello')
}
- 声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
let unusable: void = null
let value: void // 定义了一个不可以保存任意类型数据的变量, 只能保存null和undefined
// value = 123; // 报错
// value = "abc";// 报错
// value = true;// 报错
// 注意点: null和undefined是所有类型的子类型, 所以我们可以将null和undefined赋值给任意类型
// value = null // 不会报错
value = undefined // 不会报错
Null 和 Undefined
- TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。
- 和void相似，它们的本身的类型用处不是很大：
let u: undefined = undefined
let n: null = null
Never 类型
- 表示那些不存在值的类型
- 一般用于抛出异常或者根本不可能有返回值的函数
function demo(): never {
throw new Error('报错了')
}
demo()
Object 类型
// Object 类型
// 表示一个对象
let obj: object
// obj = 1 // 报错
obj = { name: 'sss', age: 12 }
console.log('obj', obj) // {name: "sss", age: 12}
类型断言
- 类型断言有两种形式。 其一是“尖括号”语法：
let str1: any = 'hello world'
let strLength: number = (<string>str1).length
console.log(strLength)
- 另一个为as语法：
let str2: any = 'hello world'
let strLength1: number = (str2 as string).length
console.log(strLength1)
- 两种形式是等价的。
- 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有as语法断言是被允许的。
null 和 undefined
- Typescript 具有两种特殊类型 null 和 undefined
- 如果不想让 null 和 undefined 相互赋值,
- 那么在tsconfig.json中开启 strictNullChecks
let value1 = null
let value2 = undefined
// 开启strictNullChecks
value1 = value2 // 报错
- 如果我们开启了strictNullChecks, 还想把null和 undefined赋值给其它的类型
- 那么我们就必须在声明的时候使用联合类型
let value:(number | null | undefined);
value = null;
value = undefined;
- 对于可选属性和可选参数而言
- 如果开启了strictNullChecks, 那么默认情况下数据类型就是联合类型
- 就是当前的类型 + undefined类型
class Person {
name?: string
}
function say(age?: number) {}
- 去除null 或者 undefined 检测
function getLength(value: string | null | undefined) {
value = 'abc'
return () => {
// return value.length // Object is possibly 'null' or 'undefined'.
// 使用 ! 来去除 null 和 undefined
// ! 的含义就是这个变量一定不是null 和 undefined
return value!.length
}
}
