1.TypeScript優(yōu)勢：
JS的超集，JS有的TS都有爸舒，能運行JS就能運行TS
強大的類型系統(tǒng)提升了代碼的可閱讀性她紫、可維護性
類型推斷、類型檢查屿讽、代碼提示
有利于在團隊中推動嚴格的代碼檢查
2.項目配置TypeScript
- 安裝TypeScript
npm install --save-dev typescript
- 生成tsconfig.json
tsc --init
- 安裝類型申明（眾多）
npm i --save-dev @types/react
npm i --save-dev @types/react-native
3.基礎類型的使用方法
- 數值類型：number
- 字符串類型：string
- 布爾類型：boolean
4.區(qū)分數組元祖和枚舉類型
5.函數類型
基礎的函數申明
函數參數類型和返回值類型的申明
函數的可選參數和默認參數
6.使用命名空間和類型文件
局部類型文件和全局類型文件
使用類型文件中的類型定義數據
新建ts文件夾昭灵，新建TsDemo.tsx文件，代碼如下：
import { Button, StyleSheet, View } from "react-native"
export default () => {
const add = (n1: number, n2: number) : number => {
return n1 + n2;
}
const onButtonPress: () => void = () => {
const num1: number = 123
const num2: number = 12.34
console.log(add(num1, num2))
const num3: Number = new Number(13)
console.log(num3.valueOf())
const s1: string = "Hello"
const b1: boolean = true
const b2: boolean = !s1; //true
//數組類型
const a1: Array<number> = [1, 2, 3, 4, 5];
const a2: number[] = [1, 2, 3, 4, 5];
const a3: Array<number> = new Array(5);
const a4: Array<number | string> = new Array();
//元祖類型
const t1: [string, number, boolean] = ["張三", 12, true];
//枚舉類型
enum Job {
Teacher = "老師",
Programmer = "程序員",
Cook = "廚師"
}
}
//函數類型
const f1: (s?: string) => void = (s?: string) => {
console.log(s || '無值');
}
const f2 = (s1: string, s2: string = '默認值') => {
console.log(s2);
}
f1();
f2('aaa');
//局部類型文件聂儒、全局類型文件虎锚、命名空間
const stu: Student = {
name: "zhangsan",
age: 13,
hobby: undefined
} as Student
console.log(stu);
const d: Info.dog = {
name: "dog",
age: 14
} as Info.dog
console.log(d);
return (
<View style={styles.root}>
<Button
title="按鈕"
onPress={onButtonPress}
>
</Button>
</View>
)
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#f0f0f0'
}
})
ts文件夾下，新建@types文件夾衩婚，再新建index.d.ts窜护，代碼如下：
//局部類型文件，如果要全局類型文件非春，直接在最外層新建typing.d.ts
type Student = {
name: string,
age: number,
hobby?: string[]
}
declare namespace Info {
type dog = {
name: string,
age: number
}
}
