最近公司項目開始統一使用Typescript了，所以自己也是開始認真的學習了一下typescript,還是很有收獲的！下面分享給大家
基礎知識
- 基礎
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
// 數組，有兩種寫法
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
// 元組(Tuple)
let x: [string, number] = ["hello", 10];
// 元組類型是一個不可變的數組，長度、類型是不可變的。
// 當添加越界的元素時，它的類型會被限制為元組中每個類型的聯合類型
x.push('123')
x.push(123)
x.push(true) // error, 不能添加非字符串和 number 的值
// 枚舉 通過enum則不能修改定義好的值了
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
// const Color1 = { Red: 1, Green: 2, Blue : 4}
// 上面Color1可以修改里面的值 例如Color.Red = 5; 枚舉就無法修改了
//枚舉的成員從0開始遞增，并且key 和 value 會互相映射
enum Colors { Red, Yellow, Blue }
Colors['Red'] === 0 // true 從0開始遞增
Colors[0] === 'Red' // 相互映射
// 枚舉事實上會編譯成如下
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Yellow"] = 1] = "Yellow";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
// 不確定的可以先聲明為any
let notSure: any = 4;
// 聲明沒有返回值
function warnUser(): void {
alert("This is my warning message");
}
let u: undefined = undefined;
let n: null = null;
// 類型永遠沒返回
function error(message: string): never {
throw new Error(message);
}
// 類型主張，就是知道的比編譯器多，主動告訴編譯器更多信息，有兩種寫法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
- 封裝
private/protected/public
- interface 接口
interface SystemConfig {
attr1: string;
attr2: number;
func1(): string;
func2(): void;
}
<!-- 我們給軟件定了一個系統參數的配置接口，他定義了系統配置的形狀，有兩個屬性attr1和attr2，兩個方法func1和func2，這樣如果定義了const systemConfig: SystemConfig = {},那systemConfig就不能隨意修改了，他有形狀了。 -->
也可以用implements來實現接口，這樣可以實現類似更為靈活的繼承，如：
class A extends BaseClass implements BaseInterface1, BaseInterface2 {}
<!-- 類A繼承了BaseClass，并且繼承了BaseInterface1和BaseInterface2兩個接口 -->
// 接口也是可以繼承接口的
interface Fa {
surname: string
}
interface Son extends Fa {
name: string
}
const obj: Son = {
surname : 'z',
name: 'zc'
}
class Fa {
constructor() {}
suck(){
}
}
interface Son extends Fa {
suck():void;
name: string;
}
- 命名空間 module/namespace
namespace Module1 {
export interface SubModule1 {}
export interface SubModule2 {}
}
const module: Module1.SubModule = {}
- 聲明文件 declare
declare 定義的類型只會用于編譯時的檢查，編譯結果中會被刪除。
在開發過程中不可避免要引用其他第三方的 JavaScript 的庫。雖然通過直接引用可以調用庫的類和方法，但是卻無法使用TypeScript 諸如類型檢查等特性功能。為了解決這個問題，需要將這些庫里的函數和方法體去掉后只保留導出類型聲明，而產生了一個描述 JavaScript 庫和模塊信息的聲明文件。通過引用這個聲明文件，就可以借用 TypeScript 的各種特性來使用庫文件了。
假如我們想使用第三方庫，比如 jQuery，我們通常這樣獲取一個 id 是 foo 的元素：
$('#foo');
// 或
jQuery('#foo');
但是在 TypeScript 中，我們并不知道 $ 或 jQuery 是什么東西：
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
這時，我們需要使用 declare 關鍵字來定義它的類型，幫助 TypeScript 判斷我們傳入的參數類型對不對：
declare var jQuery: (selector: string) => any;
jQuery('#foo');
declare 定義的類型只會用于編譯時的檢查，編譯結果中會被刪除。
上例的編譯結果是：
jQuery('#foo');
聲明文件
聲明文件以 .d.ts 為后綴，例如：
runoob.d.ts
聲明文件或模塊的語法格式如下：
declare module Module_Name {
}
TypeScript 引入聲明文件語法格式：
/// <reference path = " runoob.d.ts" />
- 泛型
function makeState<S>() {
let state: S
function getState() {
return state
}
function setState(x: S) {
state = x
}
return { getState, setState }
}
// 限制它就只能輸入輸出number和string類型
function makeState<S extends number | string>() {
let state: S
function getState() {
return state
}
function setState(x: S) {
state = x
}
return { getState, setState }
}
// 如果我傳入boolean類型
const boolState = makeState<boolean>()
// 泛型的默認類型
function makeState<S extends number | string = number>()
// https://segmentfault.com/a/1190000021219586
泛型其實可以當作普通函數在聲明時的一個參數，這個參數代表類型。
我們可以給函數值參數設置默認值，
也可以通過typescipt的泛型給函數類型參數設置默認值。
function regularFunc(x = 2)
regularFunc()
function genericFunc<T = number>()
genericFunc()
其實上面已經涉及到泛型約束了，我們再來看一下更具體的泛型約束
//泛型無法知道具體的類型，所以無法操作它的屬性和方法
function Test<T> (a:T):void {
console.log(a.length); // error
}
Test<string>('1')
interface hasLengthProp {
length : number;
}
function Test<T extends hasLengthProp>(a:T):void {
console.log(a.length);
}
- 別名
type strAria = string; // 給 string 類型定義了 strAria別名
const str: strAria = 'abc';
type fnAria = () => string;
function (callback:fnAria):void {
callback();
}
// 我們使用 type 定了一個字符串字面量類型 EventNames，它只能取三種字符串中的一種
type EventName = 'xm' | 'xh' | 'xb';
const str : EventName = 'xb'
const elseStr : EventName = 'xf' // error, 不在這幾個名字當中
- 聲明合并
就是說聲明兩個同樣的接口、類或者函數，會進行合并操作。
合并的屬性的類型必須是唯一的
interface Alarm {
price: number;
alert(s: string): string;
}
interface Alarm {
weight: number;
alert(s: string, n: number): string;
}
//===> 相當于
interface Alarm {
price: number;
weight: number;
alert(s: string, n: number): string;
}
demo
我們可以先做一個簡單的 demo 來感受一下 TypeScript 的魅力。首先在 src/page 新建一個 Demo.tsx.
在其中定義一個無狀態組件 Hello。
import React from 'react';
const Hello = ({ name }) => <div>Hello,{name}</div>;
接下來我們使用它，
const App = () => <Hello />;
export default App;
我們發現他拋出了如下錯誤 :
不能將類型“{}”分配給類型“{ name: any; }”。類型“{}”中缺少屬性“name”。
因為我們使用了 name，Typescript 認為他是必填參數。如果不存在便認為程序錯誤，并造成編譯失敗。這可以幫助我們避免很多低級錯誤。
我們也可以使用 Class 語法來聲明組件，代碼如下：
class Message extends React.Component<{
message: string;
}> {
public render() {
return <div>{this.props.message}</div>;
}
}
我們可以通過 <> 的第一個參數來指定 props 的類型。通過第二個參數來指定 state 的類型
代碼如下：
class Message extends React.Component<
{
message: string;
},
{
count: number;
}
> {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
public render() {
return (
<div>
{this.props.message}
{this.state.count}
</div>
);
}
}
在這里，我們定義了一個 包含 count 的 state ，count 的類型為 number。然后在類 constructor 內部初始化 state。其余使用方式與 javascript 中相同。
我們可以自行修改 count，
public increment = () => {
const { count } = this.state;
this.setState({
count: count + 1
});
};
interface IProps {
aProps: string;
bProps: string;
}
interface IState {
aState: string;
bState: string;
}
class App extends React.PureComponent<IProps, IState> {
state = {
aState: '',
bState: '',
};
}
TS 對 類裝飾器的靜態解析還不支持, 建議React 和 Redux 的綁定函數 connect 用函數寫法
const mapStateToProps = (state: {}, ownProps: IProps) => {};
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(App);
以上是自己的一點點對typescript的基礎知識的了解，當然以上肯定會存在很多不足的地方，我會繼續更加深入的學習，歡迎各位提出寶貴的意見或建議，也希望能幫助到你從中獲得一些知識！
認真學前端 QQ群：619069335
