Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add TypeScript setup guide. #18337

Merged
merged 4 commits into from
Jan 9, 2020
Merged

Docs: Add TypeScript setup guide. #18337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
449f447
doc: add TypeScript setup documentation
DavidPeicho Jan 8, 2020
be9324d
doc: TypeScript: fix typo
DavidPeicho Jan 8, 2020
8b8c354
doc: TypeScript: rephrase & fix typo
DavidPeicho Jan 8, 2020
5a684e0
doc: TypeScript: add placeholder for chinese translation
DavidPeicho Jan 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ var list = {
"Browser support": "manual/en/introduction/Browser-support",
"WebGL compatibility check": "manual/en/introduction/WebGL-compatibility-check",
"How to run things locally": "manual/en/introduction/How-to-run-things-locally",
"Typescript setup": "manual/en/introduction/Typescript-setup",
"How to use WebGL 2": "manual/en/introduction/How-to-use-WebGL2",
"Drawing lines": "manual/en/introduction/Drawing-lines",
"Creating text": "manual/en/introduction/Creating-text",
Expand Down Expand Up @@ -459,6 +460,7 @@ var list = {
"浏览器支持": "manual/zh/introduction/Browser-support",
"WebGL兼容性检查": "manual/zh/introduction/WebGL-compatibility-check",
"如何在本地运行Three.js": "manual/zh/introduction/How-to-run-things-locally",
"Typescript setup": "manual/zh/introduction/Typescript-setup",
"如何使用WebGL 2": "manual/zh/introduction/How-to-use-WebGL2",
"画线": "manual/zh/introduction/Drawing-lines",
"创建文字": "manual/zh/introduction/Creating-text",
Expand Down
46 changes: 46 additions & 0 deletions docs/manual/en/introduction/Typescript-setup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>

<p>
three.js is a JavaScript-based library. However, it's possible to use it in a TypeScript project, as the library
exposes [link:https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html Declaration Files] (*d.ts* files).
</p>

<p>
A minimal configuration is required for the TypeScript compiler to
discover three.js types.<br>
You will need to set the [link:https://www.typescriptlang.org/docs/handbook/module-resolution.html moduleResolution]
option to *node*, and the [link:https://www.typescriptlang.org/docs/handbook/compiler-options.html target] option to *es6* or newer.
</p>

<code>
// Example of minimal `tsconfig.json` file
{
"compilerOptions": {
"target": "es6",
"moduleResolution": "node",
},
"include": [ "./src/**/*.ts" ],
}
</code>

<p>
Note: As of today, it's not yet possible to use three.js typings without using those two options.
</p>

<p>
Note: It happens that some declarations are incorrect and/or missing.
Contributing to Declaration Files is really helpful for the community, making three.js
typings better and more accurate.
</p>
</body>
</html>
46 changes: 46 additions & 0 deletions docs/manual/zh/introduction/Typescript-setup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>

<p>
three.js is a JavaScript-based library. However, it's possible to use it in a TypeScript project, as the library
exposes [link:https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html Declaration Files] (*d.ts* files).
</p>

<p>
A minimal configuration is required for the TypeScript compiler to
discover three.js types.<br>
You will need to set the [link:https://www.typescriptlang.org/docs/handbook/module-resolution.html moduleResolution]
option to *node*, and the [link:https://www.typescriptlang.org/docs/handbook/compiler-options.html target] option to *es6* or newer.
</p>

<code>
// Example of minimal `tsconfig.json` file
{
"compilerOptions": {
"target": "es6",
"moduleResolution": "node",
},
"include": [ "./src/**/*.ts" ],
}
</code>

<p>
Note: As of today, it's not yet possible to use three.js typings without using those two options.
</p>

<p>
Note: It happens that some declarations are incorrect and/or missing.
Contributing to Declaration Files is really helpful for the community, making three.js
typings better and more accurate.
</p>
</body>
</html>