Skip to content

update documentation for types #401

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

Merged
merged 1 commit into from
Sep 1, 2021
Merged

update documentation for types #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
73 changes: 31 additions & 42 deletions docs/trex_typescript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ The Extensions API is a JavaScript library. If you author in TypeScript, Tableau

**In this section**

* TOC
{:toc}
- TOC
{:toc}

<div class="alert alert-info"><b>Note</b> If you want to examine and use TypeScript versions of several of the sample extensions in the <b>Samples</b> folder, see <a href="https://github.com/tableau/extensions-api/tree/master/Samples-Typescript" target="_blank">Samples-Typescript (GitHub)</a> and follow the instructions to <a href="https://tableau.github.io/extensions-api/docs/trex_examples.html#use-the-typescript-samples" target="_blank">Use the TypeScript Samples</a>.
</div>
Expand All @@ -29,44 +29,39 @@ Import the Extensions API type definitions into your TypeScript code. It is best

For example, to import the module, `Parameter`, from `@tableau/extensions-api-types` you would use the following:

```javascript

import { Parameter } from '@tableau/extensions-api-types';

```

If you want to use Tableau enumerations as parameters to functions, or as a member variables inside class definitions, you need to import the type definitions from `@tableau/extensions-api-types/ExternalContract/Namespaces/Tableau`. You can then declare parameters or variables of that type.
For example, to be able to use the `DataType` enum as a parameter to a function, you need to use the following import statement:

```javascript
```javascript
import { Parameter } from "@tableau/extensions-api-types";
```

import { DataType } from '@tableau/extensions-api-types/ExternalContract/Namespaces/Tableau';
If you want to use Tableau enumerations as parameters to functions, or as a member variables inside class definitions, you need to import the type definitions from `@tableau/extensions-api-types`. You can then declare parameters or variables of that type.
For example, to be able to use the `DataType` enum as a parameter to a function, you need to use the following import statement:

```
```javascript
import { DataType } from "@tableau/extensions-api-types";
```

You can then use `DataType` as a type for a parameter in a class method. You can't use the fully qualified name as a parameter type (`tableau.DataType`), even though you can use the fully qualified name within a method.
You can then use `DataType` as a type for a parameter in a class method. You can't use the fully qualified name as a parameter type (`tableau.DataType`), even though you can use the fully qualified name within a method.

```javascript
private foo(value: DataType) {
```javascript
private foo(value: DataType) {

switch (value) {
case tableau.DataType.String:
console.log(value);
break;
// ... do other things
}
}
switch (value) {
case tableau.DataType.String:
console.log(value);
break;
// ... do other things
}
}

```
```

Please note that `@tableau/extension-api-types` submodules are subject to change. Import only from `@tableau/extensions-api-types`.

## Set compiler options for type definitions

You can set the `tsc` compiler options in the `tsconfig.json` file for the project. You can set the `typeRoots` option to point to the folder that contains the Extensions API type definitions. The following example is used for the sample extensions in the Samples-Typescript folder. In the `tsconfig.json` file, the `typeRoots` options includes the `./node_modules/@tableau` path. The TypeScript samples use Node.js and webpack to build the extensions.


```json

{
"compilerOptions": {
/* Basic Options */
Expand All @@ -78,37 +73,31 @@ You can set the `tsc` compiler options in the `tsconfig.json` file for the proje
"typeRoots": ["./node_modules/@tableau", "./node_modules/@types"]
}
}



```

## Compile your code with the TypeScript compiler

If you need to install the compiler, see [TypeScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript?=target="_blank"). Visual Studio Code supports TypeScript, but does not automatically include the TypeScript compiler (`tsc`). The TypeScript compiler transpiles your TypeScript source code to JavaScript. You include the JavaScript output in your extension `.html` file(s).


## Use the compiled JavaScript output in your extension

The TypeScript compiler (`tsc`) transpiles the source code into JavaScript. You just need to include the path to the JavaScript file in your extension code.
The TypeScript compiler (`tsc`) transpiles the source code into JavaScript. You just need to include the path to the JavaScript file in your extension code.

For example, the extensions in the Samples-Typescript folder all link to Extensions API JavaScript library `tableau.extensions.1.latest.js` and to the compiled JavaScript file for the extension (not the TypeScript source file).
For example, the extensions in the Samples-Typescript folder all link to Extensions API JavaScript library `tableau.extensions.1.latest.js` and to the compiled JavaScript file for the extension (not the TypeScript source file).
In the HTML code for the extensions, the JavaScript files are referenced. The following example, links to the `datasources.js` file.

```html
<!-- Extensions Library (this will be hosted on a CDN eventually) -->
<script src="../../lib/tableau.extensions.1.latest.js"></script>

<!-- The extension code (webpack) -->
<script src="../../dist/datasources.js"></script>

<!-- Extensions Library (this will be hosted on a CDN eventually) -->
<script src="../../lib/tableau.extensions.1.latest.js"></script>

<!-- The extension code (webpack) -->
<script src="../../dist/datasources.js"></script>
```

## Related resources

* [TypeScript](https://www.typescriptlang.org/index.html?=target="_blank")
- [TypeScript](https://www.typescriptlang.org/index.html?=target="_blank")

* [TypeScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript?=target="_blank")
- [TypeScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript?=target="_blank")

* [TypeScript Sample Extensions (GitHub)](https://github.com/tableau/extensions-api/tree/master/Samples-TypeScript) and [Use the TypeScript samples]({{site.baseurl}}/docs/trex_examples.html#use-the-typescript-samples)
- [TypeScript Sample Extensions (GitHub)](https://github.com/tableau/extensions-api/tree/master/Samples-TypeScript) and [Use the TypeScript samples]({{site.baseurl}}/docs/trex_examples.html#use-the-typescript-samples)
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"http-server": "^0.12.3"
},
"devDependencies": {
"@tableau/extensions-api-types": "1.6.0-pre.16",
"@tableau/extensions-api-types": "1.6.0-pre.17",
"@tableau/tabextsandbox": "^1.1.0",
"@types/jquery": "^3.3.29",
"concurrently": "^6.2.1",
Expand Down