Skip to content

TS基础语法

基础语法

编译TS

javascript
//新建文件Runoob.ts 
const hello : string = "Hello World!"
console.log(hello)


//使用命令编译
tsc Runoob.ts


// 得到js 代码
var hello = "Hello World!";
console.log(hello);


//node执行
node Runoob.js

//最终输出
Hello World

🍎 tsc 常用编译参数

选项描述
--help显示帮助信息
--module载入扩展模块
--target设置 ECMAScript 版本(如 ES5, ES6 等)
--declaration额外生成一个 .d.ts 扩展名的文件
--removeComments删除文件中的注释
--out编译多个文件并合并到一个输出文件
--sourcemap生成一个 sourcemap (.map) 文件,存储源代码与编译代码的映射信息
--noImplicitAny在表达式和声明上有隐含的 any 类型时报错
--watch在监视模式下运行编译器,监视文件变化并重新编译

关键字

js留存的和下面这些

关键字说明
abstract用于定义抽象类或抽象方法。
any表示任意类型,禁用类型检查。
as类型断言,用于将某种类型转换为另一种类型。
await用于异步函数中,暂停代码执行直到 Promise 解决。
boolean表示布尔类型。
break退出循环或 switch 语句。
case用于 switch 语句中的分支。
catch用于捕获异常。
class用于定义类。
const定义常量变量。
continue跳过当前循环,继续下一次循环。
debugger启动调试器,暂停代码执行。
declare声明一个变量或模块,通常用于类型声明文件。
default定义 switch 语句的默认分支。
delete删除对象的属性或数组的元素。
do用于 do...while循环。
else定义条件语句中的 else 部分。
enum定义枚举类型。
export用于从模块中导出变量、函数或类。
extends用于类的继承,表示类继承其他类。
false布尔值 false
finally定义 try...catch语句中的最终执行代码块。
for用于 for循环。
from用于模块导入语句,指定模块的来源。
function定义函数。
get用于对象的 getter 方法。
if用于条件判断。
implements用于类实现接口。
import用于从模块中导入内容。
in用于检查对象中是否包含指定的属性,或用于 for...in循环。
infer用于条件类型中推断类型。
instanceof检查对象是否是指定类的实例。
interface用于定义接口。
let定义块级作用域的变量。
module定义模块(在较早的 TypeScript 版本中使用)。
namespace定义命名空间(在较早的 TypeScript 版本中使用)。
new创建类的实例。
null表示空值。
number表示数字类型。
object表示非原始类型。
of用于 for...of循环。
package用于模块系统,标识包。
private用于类成员的访问修饰符,表示私有。
protected用于类成员的访问修饰符,表示受保护的。
public用于类成员的访问修饰符,表示公共的。
readonly表示只读属性。
require用于导入 CommonJS 模块。
return退出函数并可返回值。
set用于对象的 setter 方法。
string表示字符串类型。
super用于调用父类的方法或构造函数。
switch用于 switch 语句。
symbol表示符号类型。
this引用当前类或对象的实例。
throw抛出异常。
try用于异常处理语句 try...catch
true布尔值 true
type用于定义类型别名。
typeof获取变量或表达式的类型。
undefined表示未定义的值。
unique用于 symbol 类型的唯一标识符。
var用于声明变量(已不推荐使用)。
void表示没有返回值的类型。
while用于 while循环。
with用于创建一个作用域,在该作用域内可以省略对象的引用(不推荐使用)。
yield用于生成器函数中,暂停和恢复生成器的执行。

空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码,使代码易于阅读和理解

区分大小写

区分大写和小写字符

分号是可选的

分号在 TypeScript 中是可选的,建议使用

javascript
console.log("Runoob")
console.log("Google");

// 写在同一行一定需要使用分号来分隔,否则会报错
console.log("Runoob");console.log("Google");

注释

和js差不多

  • 单行注释 ( // ) − 在 // 后面的文字都是注释内容。
  • 多行注释 (/ /) − 这种注释可以跨越多行
javascript
// 单行注释
 
/* 
多行注释 
多行注释 
 多行注释 
*/

面向对象编程

javascript
class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();


// 进行编译输出以后

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());

var obj = new Site();
obj.name();

基本结构

常见组成部分

  • 声明部分:包括类型声明、接口声明
  • 变量声明let, constvar 的使用
  • 函数声明:包括普通函数和箭头函数。
  • 类声明:用于定义类及其成员。
  • 接口与类型别名:描述类型的结构。
  • 模块化:通过 importexport 组织代码。
  • 类型断言:强制类型转换 as
  • 泛型:使代码具备更多的复用性
  • 注释:增加代码的可读性(单行注释 多行注释)
  • 类型推断:自动推断类型
  • 类型守卫:缩小类型范围
  • 异步编程:支持 async/await
  • 错误处理:通过 try/catch 进行错误捕捉。

声明部分(Declarations)

**类型声明:**TS 是静态类型语言,通过类型声明来定义变量、函数、类等类型。

javascript
let name: string = "Alice";
let age: number = 30;

**接口声明:**用于定义对象的结构,包括对象的属性和方法。

javascript
interface Person {
  name: string;
  age: number;
}

变量声明(Variable Declarations)

使用 let, const, 和 var 来声明变量。推荐 let 和 const,var 不推荐

javascript
let age: number = 25;
const pi: number = 3.14;
var age: number = 25;  // 不推荐

函数声明(Function Declarations)

函数声明

ts允许声明带有类型注解的函数,包括参数类型和返回值类型

javascript
function greet(name: string): string {
    return "Hello, " + name;
}
箭头函数

支持 ES6 的箭头函数

javascript
const greet = (name: string): string => "Hello, " + name;

类声明(Class Declarations)

提供对面向对象编程的支持,允许定义类和类的方法、属性

javascript
class Person {
    name: string;
    age: number;
    
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
    
    greet() {
      return `Hello, my name is ${this.name}`;
    }
}

接口与类型别名(Interfaces & Type Aliases)

接口(Interface):用于描述对象的形状,接口可以继承和扩展

javascript
interface Animal {
    name: string;
    sound: string;
    makeSound(): void;
}

**类型别名(Type Alias):**允许为对象类型、联合类型、交叉类型等定义别名

javascript
type IDTYPE = string | number;

模块和导入导出(Modules & Imports/Exports)

支持模块化编程,可以使用 import 和 export 来组织代码

javascript
// 导出
export class Person {
    constructor(public name: string) {}
}

// 导入
import { Person } from './person';

类型断言(Type Assertions)

javascript
let value: any = "hello";
let strLength: number = (value as string).length;

泛型(Generics)

泛型允许在定义函数、接口或类时不指定具体类型,而是使用占位符,让用户在使用时传入具体类型。泛型能够增加代码的复用性和类型安全性。

javascript
function identity<T>(arg: T): T {
    return arg;
}

注释(Comments)

javascript
// 单行注释

/* 多行注释
    多行注释 */

类型推断(Type Inference)

TypeScript 在某些情况下会自动推断变量的类型。例如,在声明变量并赋值时,TypeScript 会推断出该变量的类型。

javascript
let num = 10;  // TypeScript 推断 num 为 number 类型

类型守卫(Type Guards)

TS提供了类型守卫(如 typeof 和 instanceof),用于在运行时缩小变量的类型范围。

javascript
function isString(value: any): value is string {
   return typeof value === 'string';
}

异步编程(Asynchronous Programming)

TypeScript 完全支持异步编程,可以使用 async/await 语法来处理异步操作。

javascript
async function fetchData(): Promise<string> {
   const response = await fetch("https://example.com");
   const data = await response.text();
   return data;
}

错误处理(Error Handling)

TypeScript 允许使用 try/catch 块进行错误处理,还可以使用类型来描述错误的类型。

javascript
try {
   throw new Error("Something went wrong");
} catch (error) {
 if (error instanceof Error) {
    console.error(error.message);
 }
}

Released under the MIT License.