typescript书写规范
<h1 id="各位看官git上求个星星-我有趣的前端笔记webpackbabeltypescript手撕排序算法等持续更新中">各位看官git上求个星星！ 我有趣的前端笔记！！（webpack，babel，typescript，手撕排序算法等持续更新中！！）</h1><h2 id="基础用法">基础用法</h2>
<h4 id="1变量类型">1、变量类型</h4>
<table>
<thead>
<tr>
<th></th>
<th>英文</th>
<th>示例</th>
<th style="text-align: center">注意</th>
</tr>
</thead>
<tbody>
<tr>
<td>布尔值</td>
<td>boolean</td>
<td><code>let isDone: boolean = false;</code></td>
<td style="text-align: center"></td>
</tr>
<tr>
<td>数字</td>
<td>number</td>
<td><code>let decLiteral: number = 0xf00d; </code></td>
<td style="text-align: center">number为浮点型，可8,10,16进制</td>
</tr>
<tr>
<td>字符串</td>
<td>string</td>
<td><code>let name: string = "bob";</code></td>
<td style="text-align: center"></td>
</tr>
<tr>
<td>数组</td>
<td>Array</td>
<td><code>let list: number[] = ;</code><br><code>let list: Array<number> = ;</code></td>
<td style="text-align: center">1、基本类型+[]<br>2、数组泛型 Array<类型></td>
</tr>
<tr>
<td>元组</td>
<td>Tuple</td>
<td><code>let x: = ['hello', 10];</code></td>
<td style="text-align: center">给下标越界赋值，为联合类型（string|number）</td>
</tr>
<tr>
<td>枚举</td>
<td>enum</td>
<td><code>enum Color {Red, Green, Blue}</code></td>
<td style="text-align: center">1、可通过索引下标 获取指定字符串<br>2、可通过字符串下标 获取索引</td>
</tr>
<tr>
<td>任意</td>
<td>Any</td>
<td><code>let list: any[] = ;</code></td>
<td style="text-align: center">可调用对应类型的方法，对比于不可调用方法的Object</td>
</tr>
<tr>
<td>Void</td>
<td>Void</td>
<td><code>let unusable: void = undefined;</code></td>
<td style="text-align: center">只能为 <code>void</code> 类型赋予 <code>undefined</code> 和 <code>null</code></td>
</tr>
<tr>
<td>Null&Undefined</td>
<td>Null&Undefined</td>
<td><code>let n: null = null;</code></td>
<td style="text-align: center"><code>null</code>和<code>undefined</code>是所有类型的子类型。把 <code>null</code>和<code>undefined</code>赋值给<code>number</code>类型的变量。</td>
</tr>
<tr>
<td>Never</td>
<td>never</td>
<td><code>function error(message: string): never { throw new Error(message); }</code></td>
<td style="text-align: center">抛出异常或根本就不会有返回值的函数表达式<br>或箭头函数表达式的返回值类型</td>
</tr>
<tr>
<td>Object</td>
<td>object</td>
<td><code>let n: Object= {1:1};</code></td>
<td style="text-align: center">非原始类型</td>
</tr>
</tbody>
</table>
<h4 id="2类型断言">2、类型断言</h4>
<blockquote>
<p>通过<em>类型断言</em>这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。</p>
</blockquote>
<pre><code class="language-typescript">let someValue: any = "this is a string";
//方法一："尖括号”语法
let strLength: number = (<string>someValue).length;
//方法二：as语法 《优先选择》
let strLength: number = (someValue as string).length;
</code></pre>
<h2 id="接口">接口</h2>
<blockquote>
<p>TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。</p>
<p><em>实际使用 如同一个类中的构造函数！！</em></p>
</blockquote>
<h4 id="1基础用法">1、基础用法</h4>
<pre><code class="language-typescript">//定义的接口类型 设定SquareConfig类型中 必须符合下面包含的类型
interface SquareConfig {
//属性名后的？代表可选参数
color?: string;
width?: number;
}
//此处参数中的config 限制了参数类型，返回值
//后面的{ color?: string; area: number } 为返回值限定
function createSquare(config: SquareConfig): { color?: string; area: number } {
return {color: "white", area: 100};
}
//等价于 将返回值提成接口形式
interface config{
color?: string;
area: number;
}
function createSquare(config: SquareConfig): config {
return {color: "white", area: 100};
}
</code></pre>
<h4 id="2只读属性">2、只读属性</h4>
<p><code>readonly</code> vs <code>const</code></p>
<blockquote>
<p>最简单判断该用<code>readonly</code>还是<code>const</code>的方法是看要把它做为变量使用还是做为一个属性。</p>
<p>做为变量使用的话用 <code>const</code>，若做为属性则使用<code>readonly</code>。</p>
</blockquote>
<pre><code class="language-typescript">interface Point {
readonly x: number;
readonly y: number;
}
//无法直接通过赋值修改
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!
</code></pre>
<h2 id="类">类</h2>
<h4 id="1与js的差别">1、与JS的差别</h4>
<blockquote>
<p>与java的类类似 有public private protected修饰方法 此处不过多赘述！</p>
</blockquote>
<p><em>要注意的是</em>：类的继承 构造函数中必须要调用super()</p>
<blockquote>
<p>下面给出一个例子</p>
</blockquote>
<pre><code class="language-typescript">class Person {
protected name: string;
protected constructor(theName: string) { this.name = theName; }
}
// Employee 能够继承 Person
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // 错误: 'Person' 的构造函数是被保护的.
</code></pre>
<blockquote>
<p>类定义会创建两个东西：类的实例类型和一个构造函数。 因为类可以创建出类型，所以你能够在允许使用接口的地方使用类。</p>
</blockquote>
<pre><code class="language-typescript">class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};
</code></pre>
<h2 id="方法">方法</h2>
<h4 id="1与js的差别-1">1、与JS的差别</h4>
<ul>
<li>需要完全符合参数数量，JavaScript为可选</li>
</ul>
<pre><code class="language-typescript">function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");// error, too many parameters
let result3 = buildName("Bob", "Adams"); // ah, just right
</code></pre>
<ul>
<li>剩余参数收集方法</li>
</ul>
<pre><code class="language-typescript">function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
</code></pre>
<h4 id="2this">2、this</h4>
<blockquote>
<p>当你this使用指针不当时，TypeScript会警告你犯了一个错误</p>
</blockquote>
<pre><code class="language-typescript">interface Card {
suit: string;
card: number;
}
interface Deck {
suits: string[];
cards: number[];
createCardPicker(this: Deck): () => Card;
}
let deck: Deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function(this: Deck) {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return {suit: this.suits, card: pickedCard % 13};
}
}
}
let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
alert("card: " + pickedCard.card + " of " + pickedCard.suit);
</code></pre>
<h4 id="3重载">3、重载</h4>
<blockquote>
<p>相同函数名 接收的形参不同 执行不同代码</p>
</blockquote>
<p><em>在JavaScript中不支持重载！因为其参数是可选项！但是typescript可以</em></p>
<pre><code class="language-typescript">function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
</code></pre>
<h2 id="泛型">泛型</h2>
<blockquote>
<p>除了提供的类型，用户也可以以自己的数据类型来使用组件</p>
</blockquote>
<pre><code class="language-typescript">function identity<T>(arg: T): T {
return arg;
}
</code></pre>
<h2 id="枚举">枚举</h2>
<h4 id="1概念">1、概念</h4>
<blockquote>
<p>定义一些带名字的常量。</p>
</blockquote>
<h4 id="2基础用法">2、基础用法</h4>
<ul>
<li>没给值时，会根据最后的初始值进行向下排序</li>
<li>可以利用下标索引访问string ，也可以用string访问索引</li>
</ul>
<pre><code class="language-typescript">enum BooleanEnum {
No = 2,
haha=4,
true,
}
console.log(BooleanEnum) //{ '2': 'No', '4': 'haha', '5': 'true', No: 2, haha: 4, true: 5 }
console.log(BooleanEnum['haha'],BooleanEnum,typeof BooleanEnum) //4 Yes string
</code></pre>
<h2 id="类型兼容性问题">类型兼容性问题</h2>
<h4 id="1向下兼容">1、向下兼容</h4>
<pre><code class="language-typescript">let x = (a: number) => 0;
let y = (b: number, s: string) => 0;
y = x; // OK
x = y; // Error
</code></pre>
<h4 id="2枚举兼容">2、枚举兼容</h4>
<blockquote>
<p>枚举类型与数字类型兼容，并且数字类型与枚举类型兼容。不同枚举类型之间是不兼容的。</p>
</blockquote>
<pre><code class="language-typescript">enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };
let status = myStatus.Ready;
myStatus = Color.Green;// Error 不能跨enum赋值
</code></pre><br><br>
来源：https://www.cnblogs.com/cc123nice/p/13419886.html
頁:
[1]