<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TypeScript 演练场 - 笔.COOL</title>
<!-- 引入 TypeScript 入口文件 -->
<script src="./main.ts"></script>
<style>
.title {
margin-top: 95px;
text-align: center;
}
.desc {
color: #777;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">
笔.COOL TypeScript Playground
</h1>
<p class="desc">
<i>一笔一划，绘就人生；一码一境，酷创未来。</i>
</p>
<p class="desc">在线编辑、运行 TypeScript 代码</p>
<img
src="https://bi.cool/static/case-materials/icons/html.svg"
style="width: 48px; height: 48px; display: block; margin: 30px auto"
/>
</div>
</body>
</html>
index.html
main.ts
md
README.md
main.ts
// TypeScript 示例代码
const greeting: string = "Hello, TypeScript!";
const numbers: number[] = [1, 2, 3, 4, 5];
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Alice",
age: 25
};
function greetPerson(person: Person): string {
return `${person.name} is ${person.age} years old`;
}
console.log(greeting);
console.log(greetPerson(person));
console.log(`Sum of numbers: ${numbers.reduce((a, b) => a + b, 0)}`);
// TypeScript 类型示例
type UserId = string | number;
const userId: UserId = "user123";
// 泛型示例
function identity<T>(arg: T): T {
return arg;
}
const result = identity<string>("TypeScript is great!");
console.log(result);
预览